<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

<style type="text/css">
    #logo{
        float: left;
    }
    #menu{
        position: absolute;
        top:10px;
        right: 200px;
        z-index: 2;
    }
    #extraitem{
        position: relative;
        top:20px;
        text-align: right;
        font-size: 0;
        margin: 0px;
    }
    #extraitem span{
        padding: 5px;
        margin:0; 
        font-size: 15px;    
        background-color: #EAFFFA;
        z-index: 10;
        

    }
    #navs{   
        position: relative;
        top:10px;  
        margin: 1px auto; 
        width: 100%;  
    }
    #nav{
        width: 100%;
        /* text-align:justify; */
        margin: 0px;
        padding: 0px;
        font-size: 0;
        /* 行内水平等排布方式 */
        display:flex;
        display:-webkit-flex;/*Safari*/
        justify-content:space-between;/*水平排布方式*/
        align-items:center;/*垂直对齐方式*/
        background: #FE6915;

    }
    #nav>span{
        
        /* float:left; */
        padding: 10px;
        margin: 0px;
        /* background: #FE6915;  */
        color: white;
        text-align: justify;
        line-height: 40px;
        font-size: 15px;
        cursor: pointer;
    }
    #nav>span:hover{
        background: black;
        font-weight: bold;
    }
    #banner{
        margin:10px 0 0 0;
        width:100%;
    }
    #book{
        
        position: relative;
        top: 30px;
        border:1px #CCE9AC solid;
    }

    #mark{
        position: absolute;
        left: -10px;
        z-index: 2;
    }
     .bookitems{
        display: inline;
        position: relative;
    } 
    
    #bookmark01{
        position: absolute;
        left: 14px;
        z-index: 3;
        width: 12px;
        
    }
    #bookmark02{
        position: absolute;
        left: 12px;
        z-index: 3;
        width: 10px;
    }

    #bookmark03{
        position: absolute;
        left: 10px;
        top: -20px;
        z-index: 3;
        width: 10px;
    }
    

</style>
</head>

<body>
    <div class="wrapper">

        <img id = "logo" src ="image/logo.jpg" >
        <img id = "menu" src ="image/icon_count.png" >
        <div id = "extraitem">
            <p>
                <span>尾品汇</span>
                <span>当当优品</span>
                <span>数字馆</span>
                <span>都看阅读</span>
            </p>
        </div>
        <div id = "navs" >
            
            <div id ="nav">
                <span>首页</span>
                <span>图书</span>
                <span>音像</span>
                <span>童装</span>
                <span>服装</span>
                <span>鞋靴</span>
                <span>运动</span>
                <span>箱包</span>
                <span>美妆</span>
                <span>珠宝</span>
                <span>家居</span>
                <span>食品</span>
                <span>酒</span>
                <span>手机</span>
                <span>数码</span>
                <span>电脑</span>
                <span>家电</span>
            </div>         
            <img id="banner" src ="image/banner.png" width="100%">
        </div>

        <div id="book">
            <img id="mark" src="image/bg_bang.gif" width="100px">
            <table border="0" align="center" cellspacing="1" style="z-index:10" width="100%">
                    <tr align="center">
                        <td rowspan="2" width="30%">
                                <div class="bookitems">
                                        <img id="bookmark01" src ="image/bookNo1.gif" ">
                                        <img id="book01" src ="image/book-01.jpg" width="150px">
                                        
                                    </div>
                        </td>
                        <td rowspan="2" width="30%">
                            <p style="font-size:7px;text-align: left">
                                <span style="color:#1A66B3;">偷影子的人</span><br/>
                                作者:[法] 马克·李维出版社(Marc Levy)<br/>
                                出版社:湖南文艺出版社<br/>
                                当当价:<span style="color:#8E112B">¥ 17.90</span><br/>
                                不知道姓氏的克蕾儿。这就是你在我生命里的角色,<br/>
                                我童年时的小女孩,今日锐变成了女人,一段青梅竹<br/>
                                马的回忆,一个时间之神没有应允的愿望。一个老<br/>
                                是受班上同学欺负的瘦弱小男孩,因为拥有一种特殊<br/>
                                能力而强大:他能"偷别人的影子"
                            </p>
                        </td>
                        <td >
                            <div class="bookitems">
                                <div style="display:inline-block">
                                    <img id="bookmark02" src ="image/bookNo2.gif" >
                                    <img id="book02" src ="image/book-02.jpg" width="80px" style="display:inline;vertical-align: middle">
                                </div>
                                
                            </div>
                        </td>
                        <td>
                            <div>
                                    <p style="font-size:7px;text-align:left">
                                        <span style="color:#1A66B3">看见(央视知名记者,主持人柴静:十年个人<br/>
                                        成长的告白。中国社会变迁的备忘</span><br/>
                                        作者:柴静 著<br/>
                                        出版社:广西师范大学出版社<br/>
                                        <span style="color:#8E112B">¥ 29.40</span><span style="color:#5EA593"> 7.4折 </span> 
                                    </p>
                            </div>
                        </td>
                    </tr>
                    <tr align="center">  
                        <td >
                            <div class="bookitems">
                                <div style="display:inline-block">
                                    <img id="bookmark03" src ="image/bookNo3.gif"  >
                                    <img id="book03" src ="image/book-03.jpg" width="80px" style="display:inline;vertical-align: middle">
                                </div>
                                
                                    
                            </div>
                        </td>
                        <td>
                            <div >
                                    <p style="font-size:7px;text-align:left">
                                            <span style="color:#1A66B3">改变孩子先改变自己</span><br/>
                                            作者: 贾容韬 贾毅 著<br/>
                                            出版社:作家出版社<br/>
                                            <span style="color:#8E112B">¥ 22.20</span><span style="color:#5EA593"> 7.4折 </span>
                                    </p>
                            </div> 
                        </td>
                            
                    </tr>
                </table>
    
        </div>

        <div id="footer">
            <p style="font-size:8px;text-align:center;margin: 50px;">
                Copyright(c) 当当网 2004-2017,All Right Reserved<img src ="image/validate.gif" style="vertical-align:middle" width="20px">京ICP证041189号出版物经营许可证 新出发京批字第直0673号
            </p>
        </div>

    </div>
    
</body>

</html>